<template>
  <el-card class="app-container">
    <c-u-r-d-table :option="option" ref="table"/>

    <el-dialog
      :visible.sync="importDialogShowed"
      title="批量导入快递单号"
      width="700px"
      :close-on-click-modal="false"
      center
      top="30vh"
    >
      <el-alert type="warning" :closable="false" show-icon style="line-height: 1.6">
        单次最多可导入中通快递单号的数量最多5000条。若数量较多，可拆分文件后上传
      </el-alert>
      <div slot="footer" class="flex">
        <div class="flex-con" style="text-align: left;font-size: 14px">
          <a href="/template/import_express_no.xlsx" target="_blank">
            下载导入模板
          </a>
        </div>
        <file-uploader
          title="上传导入文件"
          icon=""
          size="mini"
          type="primary"
          action="/api/ems/sign/import"
          @success="handleImportSuccess"
        />
        <div class="flex-con"></div>
      </div>
    </el-dialog>

  </el-card>
</template>

<script>

import ColumnType from '@/framework/constant/ColumnType'
import SignStatusEnum from '@/feature/ems/infra/constants/SignStatusEnum'
import { signApi } from '@/feature/ems/infra/api/signApi'
import CURDTable from '@/framework/components/table/CURDTable'
import FileUploader from '@/framework/components/FileUploader'

export default {
  components: { FileUploader, CURDTable },
  data() {
    return {
      importDialogShowed: false,
      option: {
        requestApi: signApi,
        showSelection: false,
        columns: [
          {
            label: '快递单号',
            searchable: true,
            prop: 'expressNo'
          },
          {
            label: '签收时间',
            prop: 'signTime'
          },
          {
            label: '签收状态',
            prop: 'signStatus',
            searchable: true,
            type: ColumnType.RADIO,
            options: SignStatusEnum
          },
          {
            label: '创建时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtCreate'
          },
          {
            label: '修改时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtModified'
          }
        ]
      }
    }
  },
  methods: {
    handleImportSuccess() {
      this.importDialogShowed = false
      this.$refs.table.reloadTable()
    },
    handleImport() {
      this.importDialogShowed = true
    }
  }
}
</script>

